<%- include header%>

<div class="pub_tra">
	<div style="background:url(/images/1.jpg) center no-repeat; background-size: 100% 100%;height: 400px;
		 position: relative; margin-top: -20px;padding-top: 100px;">

		<p>
			<h2 style="margin: 200px 0px 0px 10%;color: white;" class="art_title">
			<img src="/<%= head%>"
					style="height:130px;width:130px;border-radius:130px;">
			<a style="color: white; text-decoration: none; font-weight: bold; margin-left: 3%;" id="post_title">
				<%= post.title%>
				
			</a>
			
			
						
			<button id="collect" title="收藏本游记">
				<span class="glyphicon glyphicon-star"></span></button>		
					<%for(var i=0;i<collects.length;i++){%>
						<!--<h6><%= collects[i].collect%>和<%= post.title%></h6>-->
						<%if(collects[i].collect==post.title){%>
							
							<script>
								jq("#collect").css('color','#e67e22');
							</script>
						
						<%}%>
						<%}%>
					
			
			<!--<button id="good" title="点赞"><span class="glyphicon glyphicon-heart"></span></button>-->
			</h2>
			
			<br />
			<h5 style=" margin:-30px 0px 30px 20%;">
				<a href="/u/<%= post.name %>" id="post_name" style="color: #16a085;  margin:50px 30px 30px 40px;" id="editor" name="editor">
					<%= post.name %>
				</a>
				<a style="text-decoration: none;color: dimgray; ">
					<%= post.time.minute%>
				</a>
				
				<a style="color: dimgray;  margin:20px;text-decoration: none;">
					<img src="/images/eye.png" style="width: 20px; height: 15px;margin-top: -5px;"/>
					<%if(post.pv){%>
					<%= post.pv%>
					<%}else{%>
						0
					<%}%>
					
				</a>
				<a style="color: dimgray;  margin:20px;text-decoration: none;">
					<img src="/images/comments.png" style="width: 20px; height: 20px;margin-top: 0px;"/>
					<%if(post.comments){%>
					<%= post.comments.length%>
					<%}else{%>
						0
					<%}%>
				</a>
				<a style="color: dimgray;  margin:10px;text-decoration: none;">
					<img src="/images/area.png" style="width:15px; height: 18px;margin-top: -5px;"/>
					<%= post.area%>
				</a>
				
					<% if(user.name!=post.name){%>
						<button class="btn btn-success" id="concern" style="margin-left: 30px;height: 20px;padding: 0; width: 80px;">
					+关注</button>
						<%}%>
						
					<%for(var i=0;i<concerns.length;i++){%>
						<%= concerns.concern%>
						<%if(concerns[i].concern==post.name){%>
							<script>
								jq("#concern").remove();
							</script>
						<button class="btn btn-success" style="margin-left: 30px;height: 20px;padding: 0; width: 80px;">
					已关注</button>
						<%}%>
						<%}%>
					
						
						

			
			</h5>

			<hr style="color:#e1e1e1; border:1px solid; box-shadow:0px 1px 1px #e1e1e1;  " />
	</div>

	<div class="container">
		<div class=" col-lg-12 col-md-12">
			<div class="col-lg-8 col-md-7 col-sm-7" style="overflow:hidden;height: auto;margin-top:15px;
				padding: 40px 10px 10px 10px; color:#666666;">
				
				<p style="text-align: center;">
					<%- post.post%>
				</p>
				<div style="float: right;">
					<span><p4 style="text-align: center;">
				<button class="btn btn-success" id="btn_com" 
			style="font-size: 15px;background-color:white;color: #16A085;font-weight: bold; width: 80px;height: 32x;">
						<img src="/images/comment.png" width="20px"/>&nbsp;评论	
							</button></p4>
			
			</span></div>
				

			
			</div>
			
			<div class="col-lg-3 col-md-3 col-sm-3" style="left:10%;margin-top:3%;  color: #666666; ">
				<h4> 相关目的地：<a style="color: #16A085;"><%= post.area%></a>
				<img src="/images/<%= post.area%>.jpg" style="width: 200px; height: 150px; border-radius: 10px;margin: 20px 0px;"/>
			</h4>
				<h4 style="font-size: 15px;"> 相关游记：
				
				<% arts.forEach(function(post,index){%>
			<h5 style="">
			<img src="/images/tick.png" style="width: 40px; height: 40px;"/>
			<a href="/u/<%= post.name%>/<%= post.time.day%>/<%= post.title%>/<%= areas%>" target="_blank"
				style=" color: #666666;">
					<%= post.title%>
			</a><br />
			<%})%>
			</h5></h4>
			</div>
			<div class="col-lg-8 col-md-7 col-sm-7" style="height: auto">
				<form method="post">
					<%if(user){%>
				 <div id="show"></div>
					<div class="commtent" style="display: none;">
 <div class="com_form">
					<textarea name="content" id="saytext"
		 placeholder="这篇游记怎么样呢~~"style="width:100%; height: 100px; margin-left: 0;" class="form-control" ></textarea><br />
						<span class="emotion"><img src="/images/emoticon_2.png" /></span>
						<input type="submit" value="发表评论" class="btn btn-success" id="Smohan_Showface" style="float: right;" />
				</div>
				</div>
				<%}%>
					<%if(!user){%>
					<p>
						<h4>请先登录</h4></p>
					<%}%>

				</form>
			</div>
		</div>
		<div class="col-lg-8 col-md-7 col-sm-7">
			<br />
			<% if(post.comments) { %>

			<% post.comments.forEach(function(comment, index){%>

			<p style="background: rgba(143,188,143,0.1); height: 50px; line-height: 50px;">
				<img src="/<%= comment.head%>" style="width: 50px; height: 50px; border-radius: 50px;" />
				<a href="/u/<%= comment.name %>" style="text-decoration: none;color: #16a085; ">
					<%= comment.name%>
				</a>

			</p>
			<h5 style="line-height: 40px; height: 40px; padding-left: 5%;" class="face">
				<%- comment.content%>
			</h5>
			<p><span style="color: #BFBFBF; padding-left: 5%;"><%= comment.time%></span></p>
			<%})%>
			<%}%>

		</div>
	</div>
	
</div>
<%- include stick%>
<%- include footer%>
<link rel="stylesheet" href="/stylesheets/pub_tra.css" />
<script type="text/javascript" src="/faces/qqface/jquery-browser.js" ></script>
<script type="text/javascript" src="/faces/qqface/jquery.qqFace.js" ></script>
<style>
.com_form{width:100%; position:relative}
.com_form p{height:28px; line-height:28px; position:relative}
span.emotion{width:42px; height:20px; background:url(icon.gif) no-repeat 2px 2px; padding-left:20px; cursor:pointer}
span.emotion:hover{background-position:2px -28px}
.qqFace{margin-top:4px;background:#fff;padding:2px;border:1px #dfe6f6 solid;}
.qqFace table td{padding:0px;}
.qqFace table td img{cursor:pointer;border:1px #fff solid;}
.qqFace table td img:hover{border:1px #0066cc solid;}
#show{width:680px; margin:20px auto}
	.container h3:first-child {
		margin-left: 30%;
		color: #4682B4;
		font-family: '楷体';
		font-size: 35px;
		font-weight: bold;
	}
	
	.container h4:first-child {
		font-size: 15px;
	}
	
	.container>h4>a {
		margin-left: 2%;
		padding-right: 20px;
	}
	
	#show>button {
		float: right;
		border: none;
		color: steelblue;
		background: none;
	}
	
	pre {
		border: none;
		background: none;
		font-size: 14px;
		line-height: 1.42857;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #333;
	}
	.art_title button{
		
		position: relative;
		background: none;
		border: none;
		margin-left: 10px;
		color: white;
		top: 5px;
	}

</style>
<script type="text/javascript">
	jq = jQuery.noConflict();
	jq(function() {
		//修改资料
		var editor = jq("#editor").text();
		jq("#btn_com").on('click', function() {
			jq(".commtent").toggle(300);
		});
	//关注好友
	
	var postname=jq("#post_name").text();
	 jq("#concern").on('click', function() {
//		ajax数据交互
		jq.post('/toconcern/'+postname, {postname: postname}, function (data) {
         var concern=jq("#concern");
         if(data.length!=0){
         	concern.text("已关注");
         }
    });
    return false;
		});
	
	//收藏与点赞
	var collect=jq("#collect");
	var color1=collect.css('color');
	var good=jq("#good");
	var color2=good.css('color');
	var posttitle=jq("#post_title").text();
	
	jq("#collect").on('click',function(){
		jq.post('/collect/'+posttitle, {posttitle: posttitle}, function (data) {     
         if(data.length!=0){
         	console.log(data);
         	collect.css('color','#e67e22');
         	console.log("你好");
         }
    });
    return false;
	});
	
	good.on('click',function(){
		var color2=good.css('color');
		if(color2=="rgb(255, 255, 255)"){
		good.css('color','#e67e22');
		good.attr('title','取消点赞');
		}if(color2=="rgb(230, 126, 34)"){
			good.css('color','white');
			good.attr('title','点赞');
			
		}
	});
	jq('.emotion').qqFace({
		id : 'facebox', //表情盒子的ID
		assign:'saytext', //给那个控件赋值
		path:'face/'	//表情存放的路径
	});
	jq(".sub_btn").click(function(){
		var str = jq("#saytext").val();
		jq("#show").html(replace_em(str));
	});
	
					jq(".face").each(function(){
						var com = jq(this).text();
						console.info(com);
						com = com.replace(/\[em\_/g,"<img src='/faces/qqface/face/").replace(/\_f\]/g,".gif'/>");
						console.info(com);
						jq(this).html(com);
					});
	
});	
function replace_em(str){
	str = str.replace(/\</g,'&lt;');
	str = str.replace(/\>/g,'&gt;');
	str = str.replace(/\n/g,'<br/>');
	str = str.replace(/\[em_([0-9]*)\]/g,'<img src="face/$1.gif" border="0" />');
	return str;
}
</script>